<template>
  <div class="gateInfo">
    <TitleSubColumn name="闸门基础信息" />
    <div class="content">
      <ul class="infoList">
        <li>闸门开度<strong>2.54</strong>m</li>
        <li>电压<strong>12</strong>V</li>
        <li>过闸流量<strong>2.54</strong>m³/s</li>
        <li>电流<strong>120</strong>A</li>
        <li>闸门水位<strong>3.64</strong>m</li>
        <li>温度<strong>28</strong>℃</li>
        <li>闸后水位<strong>1.26</strong>m</li>
        <li>总运行时间<strong>29853</strong>h</li>
      </ul>
      <div class="gateStatusTable">
        <MonitorTable />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import TitleSubColumn from '@/components/TitleSubColumn';
  import MonitorTable from './MonitorTable/index.vue';

  defineOptions({ name: 'GateInfo' });

  const state = reactive({
    name: 'vue3',
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .gateInfo {
    width: 50%;
    height: 100%;
    border: 1px solid ;
    border-image: linear-gradient(180deg, rgba(99, 223, 255, 0) 0%, rgba(99, 223, 255, 0.5) 100%);
    border-image-slice: 1;
    padding: 8px;
    .content {
      width: 100%;
      height: calc(100% - 40px);
      position: relative;
      ul.infoList {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        li {
          width: 50%;
          height: 38px;
          background: url(../images/dataBG.png) no-repeat;
          background-size: contain;
          color: #B4DFFF;
          font-size: 12px;
          display: flex;
          align-items: center;
          padding-left: 8px;
          strong {
            font-size: 14px;
            transform: scaleY(1.2);
            color: #fff;
            margin-left: 10px;
            margin-right: 6px;
          }
        }
      }
      .gateStatusTable {
        width: 100%;
        height: calc(100% - 224px);
        padding-top: 10px;
      }
    }
  }
</style>
